<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="520"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 8) {
            const angle = Math.atan2(toY - fromY, toX - fromX);
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
            ctx.restore();
        }

        // Parameters
        const centerX = 220;
        const centerY = 320;
        const radius = 90;
        const theta = Math.PI / 3.5; // Approx 51 degrees
        const h = 150;
        const ballRadius = 6;
        
        // Calculated Coordinates
        const Bx = centerX + radius * Math.cos(Math.PI - theta);
        const By = centerY - radius * Math.sin(Math.PI - theta);
        const Ax = Bx;
        const Ay = By - h;
        const h_arrow_x = centerX + radius + 30;

        // --- Start Drawing ---
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;

        // 1. Draw the cylinder
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
        ctx.stroke();

        // 2. Draw labels and points (O, B)
        ctx.font = "20px 'Times New Roman'";
        ctx.fillText("O", centerX - 20, centerY + 8);
        ctx.fillText("B", Bx - 25, By - 5);

        // 3. Draw radius OB and horizontal reference line
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(Bx, By);
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(centerX + radius, centerY); // Horizontal line to the right
        ctx.stroke();
        
        // 4. Draw angle arc and label θ
        const arcRadius = 35;
        ctx.beginPath();
        // The diagram shows the angle theta relative to the horizontal in the second quadrant.
        // The standard physical interpretation is the angle with the negative x-axis.
        ctx.arc(centerX, centerY, arcRadius, Math.PI - theta, Math.PI);
        ctx.stroke();
        
        // Place angle label
        const angleLabelAngle = Math.PI - theta / 2;
        const angleTextX = centerX + (arcRadius + 5) * Math.cos(angleLabelAngle);
        const angleTextY = centerY - (arcRadius + 5) * Math.sin(angleLabelAngle);
        ctx.font = "italic 20px 'Times New Roman'";
        ctx.fillText("θ", angleTextX - 5, angleTextY + 15);


        // 5. Draw ball A and its labels
        ctx.font = "20px 'Times New Roman'";
        ctx.beginPath();
        ctx.arc(Ax, Ay, ballRadius, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText("A", Ax - 25, Ay + 8);
        
        // Label m₀ (m with subscript 0)
        ctx.font = "italic 20px 'Times New Roman'";
        ctx.fillText("m", Ax + 8, Ay - 18);
        ctx.font = "italic 14px 'Times New Roman'";
        ctx.fillText("0", Ax + 18, Ay - 12);

        // 6. Draw falling path (dashed line and arrow)
        // Downward arrow from A
        ctx.save();
        ctx.lineWidth = 2;
        drawArrow(ctx, Ax, Ay + ballRadius, Ax, Ay + 35);
        ctx.restore();

        // Dashed line
        ctx.save();
        ctx.beginPath();
        ctx.setLineDash([4, 4]);
        ctx.moveTo(Ax, Ay);
        ctx.lineTo(Ax, By);
        ctx.stroke();
        ctx.restore();

        // 7. Draw height 'h' measurement
        ctx.beginPath();
        // Top guide line
        ctx.moveTo(Ax, Ay);
        ctx.lineTo(h_arrow_x, Ay);
        // Bottom guide line
        ctx.moveTo(Bx, By);
        ctx.lineTo(h_arrow_x, By);
        ctx.stroke();

        // Double-headed vertical arrow for h
        ctx.beginPath();
        ctx.moveTo(h_arrow_x, Ay);
        ctx.lineTo(h_arrow_x, By);
        // Top arrowhead
        ctx.moveTo(h_arrow_x, Ay);
        ctx.lineTo(h_arrow_x - 5, Ay + 8);
        ctx.moveTo(h_arrow_x, Ay);
        ctx.lineTo(h_arrow_x + 5, Ay + 8);
        // Bottom arrowhead
        ctx.moveTo(h_arrow_x, By);
        ctx.lineTo(h_arrow_x - 5, By - 8);
        ctx.moveTo(h_arrow_x, By);
        ctx.lineTo(h_arrow_x + 5, By - 8);
        ctx.stroke();
        
        ctx.font = "italic 20px 'Times New Roman'";
        ctx.fillText("h", h_arrow_x + 10, Ay + h / 2 + 5);

        // 8. Draw caption
        ctx.font = "20px 'KaiTi', 'SimSun', sans-serif";
        ctx.fillText("习题 3-23 图", centerX - 60, centerY + radius + 70);

    </script>
</body>
</html>